<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="../../lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .aui-upload-box {
            background-color: #fff;
            width: 105px;
            height: 105px;
            padding-top: 5px;
            padding-right: 5px;
        }

        .chose_pic_btn {
            width: 95px;
            height: 95px;
            position: relative;
            display: inline-block;
            background-image: url('');
            box-sizing: border-box;
            background-size: 45px 45px;
            background-position: center center;
            background-repeat: no-repeat;
            background-color: #ededed;
            margin-left: 3.3333%;
            margin-bottom: 12px;
            border-radius: 5px;
        }

        .chose_pic_btn div {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="role-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">服务商编号</label>
        <div class="layui-input-block">
            <input type="text" name="providerId" lay-verify="required" value="" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">头像</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <div class="aui-upload-box">
                    <div class="aui-upload-pic">
					<span class="chose_pic_btn" id="avatarImage">
						<div>
                        </div>
					</span>
                    </div>
                </div>
                <p id="errText"></p>
                <!--<button type="button" class="layui-btn" id="upload-avatar-image">上传图片</button>-->
            </div>
            <input type="text" style="display: none" name="storeAvatar" placeholder="请输入头像链接"
                   value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">服务类型</label>
        <div class="layui-input-block">
            <select name="storeType">
                <option value="">不限</option>
                <option value="线上服务商">线上服务商</option>
                <option value="线上店铺">线上店铺</option>
                <option value="主播达人">主播达人</option>
                <option value="线下零售">线下零售</option>
                <option value="线下商贸">线下商贸</option>
                <option value="线下网点">线下网点</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">服务商名称</label>
        <div class="layui-input-block">
            <input type="text" name="storeName" lay-verify="required" readonly value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">所在地区</label>
        <div class="layui-input-block">
            <input type="text" name="area" lay-verify="required" readonly value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">所在街道</label>
        <div class="layui-input-block">
            <input type="text" name="street" lay-verify="required" readonly value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">服务标签</label>
        <div class="layui-input-block">
            <input type="text" name="storeTags" lay-verify="required" readonly value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">平台ID</label>
        <div class="layui-input-block">
            <input type="text" name="userId" lay-verify="required" value="" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">平台昵称</label>
        <div class="layui-input-block">
            <input type="text" name="nickName" lay-verify="required" value="" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">关联手机</label>
        <div class="layui-input-block">
            <input type="text" name="phone" lay-verify="required" value="" class="layui-input" readonly>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">真实姓名</label>
        <div class="layui-input-block">
            <input type="text" name="realName" lay-verify="required" readonly value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">性别</label>
        <div class="layui-input-block">
            <input type="text" name="sex" lay-verify="required" readonly value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">年龄层</label>
        <div class="layui-input-block">
            <input type="text" name="age" lay-verify="required" readonly value="" class="layui-input">
        </div>
    </div>
    <!--<div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认修改</button>
        </div>
    </div>-->
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/common/common.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script>

    window.onload = function () {
        let id = GetQueryString("id");
        if (isNotNull(id)) {
            init(id);
        } else {
            const iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        }
    }

    /**
     * 初始化数据
     */
    function init(id) {
        $.ajax({
            type: "get",
            url: '/provider/' + id,
            dataType: 'json',
            contentType: 'application/x-www-form-urlencoded',
            success: function (req) {
                layui.use(['form'], function () {
                    let form = layui.form
                    form.val('role-form', {
                        "userId": req.data.userId,
                        "nickName": req.data.nickName,
                        "phone": req.data.phone,
                        "providerId": req.data.providerId,
                        "realName": req.data.realName,
                        "sex": req.data.sex,
                        "age": req.data.age,
                        "area": req.data.area,
                        "street": req.data.street,
                        "storeName": req.data.storeName,
                        "storeTags": req.data.storeTags,
                        "storeAvatar": req.data.storeAvatar,
                        "storeType": req.data.storeType,
                    });
                    if (isNotNull(req.data.storeAvatar)) {
                        $('#avatarImage').css({
                            'background-image': 'url(' + req.data.storeAvatar + ')',
                            'background-size': '100% 100%'
                        }); //图片链接（base64）
                    }
                })
            },
            error: function (e) {
                layer.msg("数据有误");
            }
        })
    }

    // 头像
    layui.use(['layer', 'form'], function () {
        const form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            upload = layui.upload,
            laydate = layui.laydate;

        //常规使用 - 普通图片上传
        let uploadInst = upload.render({
            elem: '#upload-avatar-image'
            , url: '/meily/upload'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#avatarImage').css({
                        'background-image': 'url(' + result + ')',
                        'background-size': '100% 100%'
                    }); //图片链接（base64）
                });
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code !== '200') {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                $('input[name="storeAvatar"]').val(res.url);
                $('#errText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#errText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs upload-reload">重试</a>');
                demoText.find('.upload-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });

    layui.use(['form'], function () {
        const form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            const index = layer.alert('确定提交修改吗？', {
                title: '提示'
            }, function () {
                let myMsg = layer.msg("正在提交...", {
                    icon: 16,
                    time: -1
                })
                $.ajax({
                    type: "post",
                    url: '/notice/edit',
                    data: JSON.stringify(data.field),
                    dataType: 'json',
                    contentType: 'application/json; charset=UTF-8',
                    success: function (req) {
                        layer.msg("修改成功");
                        layer.close(index);
                        // 关闭弹出层
                        setTimeout(function () {
                            layer.close(myMsg);//手动关闭
                            let iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                            // 调用父页面的方法
                            let parentWindow = window.parent;
                            parentWindow.reloadTable();
                        }, 1500);
                    },
                    error: function (e) {
                        layer.msg("修改失败");
                        layer.close(myMsg);//手动关闭
                    }
                })
            });

            return false;
        });

    });

</script>
</body>
</html>
